<style lang="less" scoped>
.mainbar {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>

<template>
  <nut-tabbar class="mainbar" v-model="props.active" @tab-switch="handleSwitch">
    <nut-tabbar-item tab-title="首页" :to="{name: 'home'}">
      <template #icon>
        <Home />
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="课程" :to="{name: 'lesson'}">
      <template #icon>
        <Category />
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="我的课程" :to="{name: 'my_lesson'}">
      <template #icon>
        <Order />
      </template>
    </nut-tabbar-item>
    <nut-tabbar-item tab-title="我的" :to="{name: 'my'}">
      <template #icon>
        <My2 />
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { Category, Home, Order, My2 } from '@nutui/icons-vue'

interface Props {
    active: number
}
const props = withDefaults(defineProps<Props>(), {
    active: 0
})
const router = useRouter()

const handleSwitch = (item: Record<string, any>, index: number) => {
  const name = item.to
  console.log(name, index)
  router.push(item.to)
}
</script>
